iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 29
0
Modern Web

從零開始遲來的Web開發筆記系列 第 29

今日筆記 - Ajax、XMLHttpRequest、JQuery ajax到Fetch API

  • 分享至 

  • xImage
  •  

原本應該是來弄一點JQuery關於HTTP request的範例的,不過意外發現一個新傢伙Fetch API,所以今天就來談談Ajax和XMLHttpRequest、JQuery.post、Fetch API的關係吧!

AJAX

全名是Asynchronous JavaScript and XML(非同步的JavaScript與XML技術),換句話說這不是瀏覽器自己發出的請求,而是由Javascript於瀏覽器內執行時發出的請求。瀏覽器會請求的資源除了HTML、CSS、JS以外,還有圖片、音樂、影片等資源,此外XML也是一個可擴展的資料定義格式,是常見的資料交換格式之一,不過近來有點被JSON取代的趨勢。附帶議題,之前提過SGML也和XML有關,HTML某些程度上也與XML一樣,還有基於XML的XHTML。

HTML、XML、XHTML

HTML、XML、XHTML三者還蠻相似的,但是文件定義有些不同,最新的HTML 5 只需要在一開始宣告<!doctype html>即可,不同版本會有不同宣告方式。XML同樣也可以只定CSS(stylesheet樣式表)。不過在HTML裡有多個單標籤元素,也就是不成對的標籤,譬如:<br/><input/>等等。這些標籤在HTML並未要求於結尾加上/,所以可以寫成<br><input>,但是XML和XHTML有強制要求。雖然瀏覽器大多都還可能看得懂,不過HTML在這樣的標籤元素加上斜線結尾我認爲是比較好的風格。

XMLHttpRequest

AJax一開始的範例用法就是使用XMLHttpRequest。下面是抄自維基的範例程式:

// Provide the XMLHttpRequest class for IE 5.x-6.x:
// Other browsers (including IE 7.x-8.x) ignore this
//   when XMLHttpRequest is predefined
var xmlHttp;
if (typeof XMLHttpRequest != "undefined") {
    xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    var aVersions = ["Msxml2.XMLHttp.5.0", "Msxml2.XMLHttp.4.0", "Msxml2.XMLHttp.3.0", "Msxml2.XMLHttp", "Microsoft.XMLHttp"];
    for (var i = 0; i < aVersions.length; i++) {
        try {
            xmlHttp = new ActiveXObject(aVersions[i]);
            break;
        } catch (e) {}
    }
}

JQuery ajax

最爲一個封裝許多高階用法的JQuery也提供了相關的用法,在JQuery官網就有段範例:

$.ajax({
  url: "/api/getWeather",
  data: {
    zipcode: 97201
  },
  success: function( result ) {
    $( "#weather-temp" ).html( "<strong>" + result + "</strong> degrees" );
  }
});

上面用法還可以使用type這個key,加上HTTP的方法,也就是GET、POST之類的,或是提供了$.post()$.get()的方式。更多可以參考官方對於JQuery.get()JQuery.post()的用法

Fetch API

Fetch API這東西是我在看MDN關於XMLHttpRequest時翻到的。從Can I Use的簡述說明中,有簡化用法並取代XMLHttpReques的意思。是個新東西,不過主流瀏覽器資源度也已經不錯了。
https://ithelp.ithome.com.tw/upload/images/20181113/20112470pwSFlnINvf.png

來看一下一個簡單的用法吧:

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

恩...如果要在加一些瀏覽器支不支援的判斷...好像和XMLHttpRequest差不多?不過fetch這個字本身蠻有意義蠻好記得。


上一篇
HTMLCollection、NoteList、JQuery Object
下一篇
瀏覽器console.log()外的一些其他用法
系列文
從零開始遲來的Web開發筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言